<template>
  <div id="app">
    <main>
      <router-view />
    </main>
    <footer>
      <router-link to="/home">
        <van-icon name="wap-home" />
        <span>首页</span>
      </router-link>
      <router-link to="/introduction">
        <van-icon name="label" />
        <span>攻略</span>
      </router-link>
      <router-link to="/add">
        <van-icon name="add" />
        <span>添加</span>
      </router-link>
      <router-link to="/follow">
        <van-icon name="like" />
        <span>关注</span>
      </router-link>
      <router-link to="/my">
        <van-icon name="manager" />
        <span>我的</span>
      </router-link>
    </footer>
  </div>
</template>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}
#app {
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
    overflow-y: scroll;
  }
  footer {
    width: 100%;
    height: 50px;
    background: #eee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    a {
      color: #333;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      .van-icon{
      font-size: 30px;
    }
    }
    .router-link-active {
      color: orangered;
    }
    
  }
}
</style>
